import { Radio, Space } from 'antd';
import { FC, useState } from 'react';
import { useIntl } from 'umi';
import DayChart from '../../components/Charge/DailychargeChart';
import TotalChart from '../../components/Charge/TotalchargeChart';
interface IProps {
  chargeData: {
    data?: API.BoxOverViewDTO & API.BoxOverviewRealtimeDTO;
    title?: string;
  };
}

export const ChargeBlock: FC<IProps> = ({ chargeData }) => {
  const intl = useIntl();
  const [showType, setShowType] = useState('1');
  const { title, data } = chargeData;
  return (
    <section>
      <div
        style={{
          fontSize: 20,
          fontWeight: 'bold',
          color: '#222222',
          display: 'flex',
          justifyContent: 'space-between',
          marginBottom: 20,
          alignItems: 'center',
        }}
      >
        <h3 style={{ fontSize: 20, marginBottom: 0 }}>{title}</h3>
        <Space>
          <Radio.Group
            value={showType}
            buttonStyle="solid"
            onChange={(event) => {
              setShowType(event?.target.value);
            }}
            className="global-group-radio-button"
          >
            <Radio.Button value="1">
              {intl.formatMessage({ id: 'stationRealtimeMonitoring.echartDay' })}
            </Radio.Button>
            <Radio.Button value="2">
              {intl.formatMessage({ id: 'stationRealtimeMonitoring.echartTotalDay' })}
            </Radio.Button>
          </Radio.Group>
        </Space>
      </div>
      <div
        style={{
          display: 'flex',
          flexWrap: 'wrap',
          width: '100%',
        }}
      >
        {showType === '1' ? (
          <DayChart
            chartData={{
              dailyChargeElectricity: data?.dailyChargeElectricity,
              dailyDisChargeElectricity: data?.dailyDisChargeElectricity,
            }}
          />
        ) : (
          <TotalChart
            chartData={{
              chargedEnergy: data?.chargedEnergy,
              dischargedEnergy: data?.dischargedEnergy,
            }}
          />
        )}
      </div>
    </section>
  );
};
